<template>
  <div>
    <div v-if="!newsData || !newsData.records || newsData.records.length === 0" class="no-data">
      暂无新闻数据
    </div>
    <div v-else>
      <div 
        v-for="(news, index) in newsData.records" 
        :key="news.id" 
        class="box"
        :class="{ 'last-item': index === newsData.records.length - 1 }" 
        @click.stop
      >
        <div class="title">
          <p class="l-title" :style="{
            'background-color': tabEnums.find(item => item.value === news.classReal)?.color
            , 'border': 'none'
          }">
            {{tabEnums.find(item => item.value === news.classReal)?.label}}
          </p>
          <h3 class="b-title">{{ news.title }}</h3>
          <div class="arrow-controls">
            <img :src="arrowIcon" class="arrow-icon up" 
                 :class="{ 'disabled': index === 0 }" 
                 @click.stop="index === 0 ? null : emits('moveUp', news.id)" 
                 alt="上移">
            <img :src="arrowIcon" class="arrow-icon down" 
                 :class="{ 'disabled': index === newsData.records.length - 1 }" 
                 @click.stop="index === newsData.records.length - 1 ? null : emits('moveDown', news.id)" 
                 alt="下移">
          </div>
        </div>
        <div class="content">{{ news.abstractReal }}</div>
        <div class="bottom">
          <div>
            <p>{{ news.opPerson ? '·由' + news.opPerson + '添加' : '' }}</p>
          </div>
          <div>
            <el-button v-permission="['write']" link :icon="Minus" v-if="news.isSelect === 1" class="pub"
              @click="emits('remove', news.id)">
              移除
            </el-button>
            <template class="edit">
              <el-button link @click.stop="drawerStates[news.id] = true"
                style="background-color: white;border: none;color: blue;" v-permission="['write']"> 编辑 </el-button>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, watch } from 'vue'
import { Minus, Plus } from '@element-plus/icons-vue'
import arrowIcon from '@/assets/circle-arrow.svg?url';

const tabEnums = [
  { color: '#83DAAD', label: '宏观形势', value: 1, key: 'macroEnvironment' },
  { color: '#EDBF45', label: '行业动态', value: 2, key: 'industryTrends' },
  { color: '#8E63B7', label: '产业链动态', value: 3, key: 'supplyChainDynamics' },
  { color: '#E8954F', label: '国际能源观察', value: 4, key: 'internationalEnergy' },
  { color: '#697798', label: '其他', value: 5, key: 'other' },
]

const props = defineProps({
  newsData: {
    type: Object,
    default: () => ({
      records: [],
      total: 0
    })
  }
});

const emits = defineEmits(['remove', 'moveUp', 'moveDown'])

const drawerStates = ref({})
</script>

<style scoped>
.box {
  height: auto;
  min-height: 100px;
  border: 1px solid #eee;
  margin-left: 0;
  margin-bottom: 15px;
  padding: 10px;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
}

.last-item {
  margin-bottom: 0;
}

.no-data {
  text-align: center;
  padding: 20px;
  color: #999;
  width: 100%;
  box-sizing: border-box;
}

.title {
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 5px;
  width: 100%;
  box-sizing: border-box;
}

.l-title {
  padding: 5px 8px;
  border: 1px solid orange;
  background-color: orange;
  color: white;
  border-radius: 10px;
  margin: 0;
  font-size: 14px;
  white-space: nowrap;
}

.b-title {
  margin-left: 12px;
  margin: 0 0 0 12px;
  font-size: 16px;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.content {
  height: 20px;
  line-height: 20px;
  color: gray;
  font-size: 14px;
  margin-left: 5px;
  width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img1 {
  margin-top: 3px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bottom {
  height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5px;
  font-size: 14px;
  margin-top: 5px;
  width: 100%;
  box-sizing: border-box;
}

.bottom>div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pub {
  margin: 0;
  color: blue;
  white-space: nowrap;
}

.edit {
  margin-left: 8px;
  display: flex;
}

.el-button {
  padding: 6px 12px;
  font-size: 14px;
}

.arrow-controls {
  display: flex;
  align-items: center;
  gap: 5px;
}

.arrow-icon {
  width: 16px;
  height: 16px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.arrow-icon:hover {
  opacity: 1;
}

.arrow-icon.down {
  transform: rotate(180deg);
}

.arrow-icon.disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.arrow-icon.disabled:hover {
  opacity: 0.3;
}
</style>